<template>
  <div>
    <RjModal
      width="640px"
      :visible="visible"
      :footer="null"
      :closable="true"
      @cancel="onCancel"
      :title="$t('portalAuth.dataProtect6')"
    >
      <a-spin size="large" :spinning="loading">
        <div style="max-height: 500px; overflow-y: auto">
          {{ $t('portalAuth.dataProtect3') }}
          <br />
          {{ $t('portalAuth.dataProtect4') }}
          <strong>
            {{ $t('portalAuth.dataProtect5') }}
          </strong>
        </div>
        <div
          v-show="btnEmit"
          style="
            border-top: 1px solid #e8e8e8;
            padding: 16px;
            padding-bottom: 0;
            text-align: right;
            margin-top: 16px;
          "
        >
          <a-button style="margin-right: 8px" @click="onCancel">
            {{ $t('common.cancel') }}
          </a-button>
          <a-button
            type="primary"
            :disabled="updateDisableFlag"
            @click="onSave"
          >
            <span v-if="updateDisableFlag">
              {{ $t('common.ok') }} ( {{ setTime }} s)
            </span>
            <span v-else>{{ $t('common.ok') }}</span></a-button
          >
        </div>
      </a-spin>
    </RjModal>
  </div>
</template>

<script>
import { RjModal } from '@components';
// import { requestHttp, maccApi } from '@utils/index';

export default {
  name: 'protectionModal',
  components: {
    RjModal,
  },
  created() {},
  data() {
    return {
      //弹窗基础参数
      visible: false,
      loading: false,
      updateDisableFlag: true,
      setTime: 5,
      timer: null,
      btnEmit: true, //点击确定后是否触发勾选
      // operation: this.params.operation,
    };
  },
  destroyed() {
    clearInterval(this.timer);
  },
  methods: {
    /**
     * @description: 显示弹框
     * @param {*} record
     * @return {*}
     */
    show(isReset) {
      if (isReset) {
        this.updateDisableFlag = true;
        this.btnEmit = true;
        this.resetBtn();
      } else {
        this.btnEmit = false;
        this.updateDisableFlag = false;
      }
      this.visible = true;
    },
    resetBtn() {
      let that = this;
      that.timer = setInterval(function () {
        that.setTime--;
        if (that.setTime == 0) {
          clearInterval(that.timer);
          that.updateDisableFlag = false;
          that.setTime = 5;
        }
      }, 1000);
    },
    onSave() {
      if (this.btnEmit) this.$emit('handlecheckProtection', true);
      this.visible = false;
    },
    onCancel() {
      this.visible = false;
      clearInterval(this.timer);
    },
  },
};
</script>

<style lang="less" scoped></style>
